<template>
  <view class="page"> 
    <view class="">
    	当前分区:{{value}} 
    </view>
    <view class="list">
    	<view class="flex item" v-for="(item, index) in items" :key="index">
    	  <view class="title flex1" @click="toPage(item.id)">
    	  	{{ item.value }} 
    	  </view>
    	  <button class="del_btn btn" @click="removeItem(index,item.id)">移除</button>
    	</view>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      id: '',
	  value: '',
      list: [],
	  items: [],
    };
  },
  onLoad(options) {
	this.id = options.id
	this.value = options.value
	this.load()
  },
  
  methods: {
	load(){ 
		var _this = this
		uni.getStorage({
		  key: 'records',
		  success: function (res) {
		    console.log('从本地读取的数据为：', res.data);
			_this.list = JSON.parse(res.data)
			_this.items = _this.list.filter(e=>e.fid == _this.id)
			console.log('获取的所有数据：', _this.list);
			console.log('获取的所有数据：', _this.items);
		  }
		});
		 
	}, 
	save(){
		uni.setStorage({
		  key: 'records',
		  data: JSON.stringify(this.list),
		  success: function () {
		    console.log('数据存储成功');
			uni.showToast({ title: '移除成功',icon:'none' });	
		  }
		});
	},
	removeItem(index,id) {
	  this.items.splice(index, 1);
	  this.list = this.list.filter(e=>e.id!=id)
	  this.save()
	},
  }
};
</script>
<style>
	.input{
		flex:1;
		border: 1px solid #ccc;
		border-radius: 5px;
		height: 28px;
		padding-left: 10px;
		margin-right: 5px;
		font-size: 12px;
	}
	.btn{
		width: 100px;
		height: 30px;
		font-size: 12px;
	}
	.list{
		height: calc(100vh - 70px);
		overflow: auto;
		padding: 10px 0;
	}
	.item{
		padding: 4px 10px;
		background-color: #f1f1f1;
		margin: 2px 0;
	}
	.del_btn{
		width: 60px;
		background-color: crimson;
		color: #fff;
	}
</style>